<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      background: #000;
    }
     
    .circle {
      position: fixed;
      width: 100%;
      height: 100vh;
      background: url(https://img1.baidu.com/it/u=80613314,3541690335&fm=253&fmt=auto&app=138&f=JPEG?w=1024&h=500);
      background-size: 100%;
      background-repeat: no-repeat;
      cursor: pointer;
      box-sizing: border-box;
      clip-path: circle(80px at var(--x) var(--y));
    }

    .circle:active {
      transform: scale(1.1);
      clip-path: circle(180px at var(--x) var(--y));
    }
    
  </style>
  <body>
    <div class="circle">
    </div>
    <script>
      const client = document.documentElement;
      client.addEventListener('mousemove',e => {
        client.style.setProperty("--x",e.clientX + 'px')
        client.style.setProperty("--y",e.clientY + 'px')
      })
    </script>
  </body>
</html>
